/**
 *
 * Copyright 2017-present scrm
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Image, Platform, StyleSheet, ViewPropTypes, Text, View, TouchableOpacity} from 'react-native';
import colors from '../../config/colors';

const propTypes = {
  name: PropTypes.string,
  nameStyle: ViewPropTypes.style,
  fontFamily: PropTypes.string,
  itemContainerStyle: ViewPropTypes.style,
  nameWrapperStyle: ViewPropTypes.style,
  children: PropTypes.any,
  link: PropTypes.any,
  onPressHandler: PropTypes.func,
  imageSource: PropTypes.number
};

const GridItem = ({
  name,
  nameStyle,
  fontFamily,
  itemContainerStyle,
  nameWrapperStyle,
  imageSource,
  link,
  onPressHandler
}) => (
  <TouchableOpacity
  style={[
    styles.itemContainer,
    itemContainerStyle && itemContainerStyle
  ]}
  onPress={() => onPressHandler && onPressHandler(link)}
  >
    { imageSource &&
      <Image style={styles.itemImg} source={imageSource} />}
    {name &&
    <View
    style={[
          styles.nameWrapper,
          nameWrapperStyle && nameWrapperStyle
        ]}
    >
      <Text
        style={[
          styles.itemName,
          nameStyle && nameStyle,
          fontFamily && { fontFamily }
        ]}
      >
        {name}
      </Text>
    </View>}
  </TouchableOpacity>
);

GridItem.propTypes = propTypes;

GridItem.defaultProps = {
  name: null
};

const styles = StyleSheet.create({
  itemContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    marginBottom: 0,
    padding: 10
  },
  itemName: {
    textAlign: 'left',
    color: colors.grey6
  },
  itemImg: {
    width: 40,
    height: 40,
    marginRight: 10,
    borderRadius: 8
  },
  nameWrapperStyle: {
    flex: 1,
    paddingTop: 15,
    paddingLeft: 10,
    paddingBottom: 10
  }
});

export default GridItem;
